<template>
  <div class="container">
    <el-dialog
      width="30%"
      title="选择供应商"
      center
      :lock-scroll="true"
      :visible.sync="dialog.centerDialogVisible"
      @open="getData"
    >
      <div class="main">
        <el-select
          :disabled="dialog.dialogType==='edit'"
          size="small"
          v-model="inside.value"
          :multiple="false"
          filterable
          remote
          center
          reserve-keyword
          placeholder="请选择供应商"
          :remote-method="insideRemoteMethod"
          :loading="inside.loading"
          @change="getOptionId(inside.value)"
        >
          <el-option
            v-for="item in inside.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <el-dialog
        :title="dialog.dialogType==='edit'?'修改购货单':'创建购货单'"
        :visible.sync="inside.innerVisible"
        width="800px"
        center
        :lock-scroll="true"
        append-to-body
        @opened="getDatas"
      >
        <div class="top">
          <el-select
            size="small"
            v-model="outer.value"
            :multiple="false"
            filterable
            remote
            reserve-keyword
            placeholder="请输入商品"
            :remote-method="remoteMethod"
            :loading="outer.loading"
            @change="getOptionGoods(outer.value)"
          >
            <el-option
              v-for="item in outer.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-button
            class="add"
            size="small"
            type="primary"
            icon="el-icon-circle-plus"
            @click="addShopping"
          >添加商品</el-button>
        </div>
        <el-table :data="formData" border style="width: 100%" empty-text="暂无数据">
          <el-table-column prop="name" label="商品" align="center"></el-table-column>
          <el-table-column prop="code" label="编号" align="center"></el-table-column>
          <el-table-column prop="unit" label="单位" align="center"></el-table-column>
          <el-table-column label="数量" align="center" width="180">
            <template slot-scope="scope">
              <el-input-number size="small" :controls="false" v-model="scope.row.sum1"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="价格" align="center" width="180">
            <template slot-scope="scope">
              <el-input-number size="small" :controls="false" v-model="scope.row.sum2"></el-input-number>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="handleEdit(scope)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirm()">确 定</el-button>
        </span>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="insideCancel">取 消</el-button>
        <el-button type="primary" @click="insideConfirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { supplierList } from "@/api/supplier/supplierList";
import { commodityList } from "@/api/commodity/commodityList";
import { addShopping, particulars, upData } from "@/api/shopping/shoppingList";
export default {
  props: {
    dialog: Object
  },
  data() {
    return {
      formData: [],
      rules: {
        num1: [{ required: true, message: "填写角色名称", trigger: "blur" }],
        num2: [{ required: true, message: "填写描述", trigger: "blur" }]
      },
      commodityList: [],

      outer: {
        options: [],
        value: "",
        list: [],
        loading: false,
        id: ""
      },
      inside: {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false,
        id: "",
        buy_order_id: ""
      }
    };
  },
  created() {
    
  },
  methods: {
    //获取修改数据
    getData() {
      let data = {
        page: 1,
        limit: 50
      };
      //获取供应商列表
      supplierList(data).then(res => {
        this.inside.options = res.data.data.map(item => {
          return { value: `${item.id}`, label: `${item.name}` };
        });
      });
      if (this.dialog.dialogType == "edit") {
        this.formData = [];
        let data = {
          buy_order_id: this.dialog.id
        };
        particulars(data).then(data => {
          if (data.code == 0) {
            data.data.buy_order_goods_info.forEach(res => {
              this.formData.push({
                id: res.id,
                good_id: res.good_id,
                erp_id: res.good_erp_id,
                name: res.name,
                code: res.good_code,
                sum1: res.count,
                sum2: res.price
              });
            });
            this.inside.id = data.data.buy_order_info.supplier_id;
            this.inside.value = data.data.buy_order_info.supplier.name;
            this.inside.buy_order_id = data.data.buy_order_info.id;
          }
        });
      } else {
        this.formData = [];
        this.inside.id = "";
        this.inside.value = "";
      }
    },
    // 获取初始商品列表
    getDatas() {
      let data = {
        page: 1,
        limit: 50,
        supplier_id: this.inside.id
      };
      commodityList(data).then(res => {
        this.outer.options = res.data.data.map(item => {
          return { value: `${item.code}`, label: `${item.name}` };
        });
        this.commodityList = res.data.data;
      });
    },
    //获取供应商数据
    getSupplierList(query) {
      let data = {
        name: query,
        page: 1,
        limit: 100
      };
      this.inside.loading = true;
      supplierList(data).then(res => {
        this.inside.list = res.data.data.map(item => {
          return { value: `${item.id}`, label: `${item.name}` };
        });
        this.inside.loading = false;
        this.inside.options = this.inside.list.filter(item => {
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });
      });
    },
    //选择供应商获取ID
    getOptionId(e) {
      this.inside.id = e;
    },
    getOptionGoods(val){
      console.log(this.outer)
    },
    //获取商品列表
    getCommodityList(query) {
      let data = {
        search: query,
        page: 1,
        limit: 100,
        supplier_id: this.inside.id
      };
      this.outer.loading = true;
      commodityList(data).then(res => {
        this.outer.list = res.data.data.map(item => {
          return { value: `${item.code}`, label: `${item.name}` };
        });
        this.outer.loading = false;
        this.outer.options = this.outer.list.filter(item => {
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });
        this.commodityList = res.data.data;
      });
    },
    // 删除
    handleEdit(scope) {
      let code = scope.row.code;
      this.formData.forEach((res, index) => {
        if (res.code == code) {
          this.formData.splice(index, 1);
        }
      });
    },
    //提交
    confirm() {
      if (this.formData.length > 0) {
        let formDataList = [];
        this.formData.forEach(res => {
          formDataList.push({
            good_id: res.good_id ? res.good_id : res.id,
            good_erp_id: res.erp_id,
            good_code: res.code,
            name: res.name,
            price: res.sum2,
            count: res.sum1,
            unit: res.unit,
            markup: res.markup
          });
        });

        if (this.dialog.dialogType == "edit") {
          let data = {
            supplier_id: this.inside.id,
            goods_data: JSON.stringify(formDataList),
            buy_order_id: this.inside.buy_order_id
          };
          upData(data)
            .then(res => {
              if (res.code == 0) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.hideDialog();
                this.$emit("upData");
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
              this.hideDialog();
              this.insideHideDialog();
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          let data = {
            supplier_id: this.inside.id,
            goods_data: JSON.stringify(formDataList)
          };
          addShopping(data)
            .then(res => {
              if (res.code == 0) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.hideDialog();
                this.$emit("upData");
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
              this.hideDialog();
              this.insideHideDialog();
            })
            .catch(err => {
              console.log(err);
            });
        }
      } else {
        this.$message({
          message: "请添加商品",
          type: "info"
        });
      }
    },
    // 显示嵌套层
    insideConfirm() {
      if (this.inside.id == "") {
        this.$message({
          message: "请选择供应商",
          type: "info"
        });
      } else {
        this.inside.innerVisible = true;
      }
    },
    //添加商品
    addShopping() {
      if (this.outer.value == "") {
        this.$message({
          message: "请选择商品",
          type: "info"
        });
      } else {
        let bool = this.formData.some(res => {
          return res.code == this.outer.value;
        });
        if (bool) {
          this.$message({
            message: "已添加该商品",
            type: "info"
          });
        } else {
          let commodity = this.commodityList.filter(res => {
            return res.code == this.outer.value;
          });
          commodity[0].sum1 = 1;
          commodity[0].sum2 = 1;
          this.formData.push(commodity[0]);
        }
      }
    },
    //搜索商品数据
    remoteMethod(query) {
      if (query !== "") {
        this.getCommodityList(query);
      } else {
        this.outer.options = [];
      }
    },
    // 嵌套搜索供应商数据
    insideRemoteMethod(query) {
      if (query !== "") {
        this.getSupplierList(query);
      } else {
        this.inside.options = [];
      }
    },
    //取消
    cancel() {
      this.hideDialog();
    },
    //取消方法
    hideDialog() {
      this.inside.innerVisible = false;
    },
    // 嵌套取消
    insideCancel() {
      this.insideHideDialog();
    },
    // 嵌套取消方法
    insideHideDialog() {
      this.dialog.centerDialogVisible = false;
    }
  }
};
</script>
<style scoped>
.top {
  position: relative;
  height: 40px;
}
.main {
  display: flex;
  justify-content: center;
}
</style>